<!-- 使用说明
<selectTimePicker ref="selectTimePicker" @getTime="getTime" :preTime="formData.busTime"></selectTimePicker>

import selectTimePicker from '@/components/pageComponents/sp-store/select-time-picker/index.vue';
components: {
	selectTimePicker
},

openSelectTimePicker() {
	this.$refs.selectTimePicker.open();
},
getTime(e) {
	console.log('营业时间', e);
	this.busTime = e;
},
 -->
<template>
  <view>
    <u-popup :show="show" @close="close">
      <view class="head">
        <view @click="close('cancel')" class="btn">取消</view>
        <view class="title">选择时间段</view>
        <view @click="close('confirm')" class="btn confirm">确定</view>
      </view>
      <view class="select-Inter">
        <view
          @click="selectInter('start')"
          class="select-time select-time-start time-box flexAIC"
        >
          <view class="label">开始时间</view>
          <view class="time-value" :class="{ active: interActive === 'start' }"
            >{{ start.hours }}:{{ start.minutes }}</view
          >
        </view>
        <view @click="selectInter('end')" class="select-time time-box flexAIC">
          <view class="label">结束时间</view>
          <view class="time-value" :class="{ active: interActive === 'end' }"
            >{{ end.hours }}:{{ end.minutes }}</view
          >
        </view>
      </view>
      <view class="content">
        <view class="hours">
          <scroll-view
            scroll-y="true"
            :scroll-into-view="hToview"
            style="height: 50vh"
          >
            <view
              @click="selecHour(index)"
              :id="'t' + item"
              v-for="(item, index) in hoursArr"
              :key="index"
              :class="{
                active: hCurIndex === index,
                'end-disable': interActive === 'end' && item < start.hours,
                'start-disable': interActive === 'start' && item > end.hours,
              }"
              class="li"
              >{{ item }}时</view
            >
          </scroll-view>
        </view>
        <view class="minutes">
          <scroll-view
            scroll-y="true"
            :scroll-into-view="mToview"
            style="height: 50vh"
          >
            <view
              @click="selecMinute(index)"
              :id="'t' + item"
              v-for="(item, index) in minutesArr"
              :class="{
                active: mCurIndex === index,
              }"
              :key="index"
              class="li"
            >
              {{ item }}分
            </view>
          </scroll-view>
        </view>
      </view>
    </u-popup>
  </view>
</template>
<script>
export default {
  props: ["preTime"],
  data() {
    return {
      show: false,
      hoursArr: [],
      minutesArr: [],

      hToview: "",
      mToview: "",

      interActive: "start",
      hCurIndex: "",
      mCurIndex: "",

      start: {
        hours: "",
        minutes: "",
        hoursIndex: 0,
        minutesIndex: 0,
      },
      end: {
        hours: "",
        minutes: "",
        hoursIndex: 0,
        minutesIndex: 0,
      },

      time: "",
    };
  },
  methods: {
    open() {
      this.show = true;
      this.initFun();
      Promise.all([this.initFindFun()]).finally(() => {
        this.setValueFun();
        this.findValue();
      });
      this.$emit("open");
    },
    close(val) {
      this.show = false;
      if (val === "confirm") {
        let time = {
          openHour: this.start.hours,
          openMin: this.start.minutes,
          closeHour: this.end.hours,
          closeMin: this.end.minutes,
        };
        this.$emit("getTime", time);
      }
      this.$emit("close");
    },
    initFun() {
      let hoursArr = [];
      for (let h = 0; h < 24; h++) {
        h = String(h).length < 2 ? `0${h}` : h;
        hoursArr.push(h);
      }
      this.hoursArr = hoursArr;

      let minutesArr = [];
      for (let m = 0; m < 60; m++) {
        m = String(m).length < 2 ? `0${m}` : m;
        minutesArr.push(m);
      }
      this.minutesArr = minutesArr;
    },
    // 选择区间
    selectInter(val) {
      this.interActive = val;
      this.setValueFun();
      this.findValue();
    },
    // 选择时分
    selecHour(index) {
      if (this.interActive === "start") {
        const item = this.hoursArr[index];
        if (item > this.end.hours) return;
        this.start.hoursIndex = index;
      } else {
        const item = this.hoursArr[index];
        if (item < this.start.hours) return;
        this.end.hoursIndex = index;
      }
      this.setValueFun();
    },
    selecMinute(index) {
      if (this.interActive === "start") {
        this.start.minutesIndex = index;
      } else {
        this.end.minutesIndex = index;
      }
      this.setValueFun();
    },
    // 赋值
    setValueFun() {
      this.start.hours = this.hoursArr[this.start.hoursIndex];
      this.start.minutes = this.minutesArr[this.start.minutesIndex];
      this.end.hours = this.hoursArr[this.end.hoursIndex];
      this.end.minutes = this.minutesArr[this.end.minutesIndex];
      if (this.interActive === "start") {
        this.hCurIndex = this.start.hoursIndex;
        this.mCurIndex = this.start.minutesIndex;
      } else {
        this.hCurIndex = this.end.hoursIndex;
        this.mCurIndex = this.end.minutesIndex;
      }
    },
    // 时间滚动位置
    findValue() {
      this.hToview = `t${this.hoursArr[this.hCurIndex]}`;
      this.mToview = `t${this.minutesArr[this.mCurIndex]}`;
    },
    // 接收父组件的当前时间
    initFindFun() {
      return new Promise((resolve) => {
        this.start.hoursIndex = this.hoursArr.indexOf(this.preTime.openHour);
        this.start.minutesIndex = this.minutesArr.indexOf(this.preTime.openMin);
        this.end.hoursIndex = this.hoursArr.indexOf(this.preTime.closeHour);
        this.end.minutesIndex = this.minutesArr.indexOf(this.preTime.closeMin);
        resolve();
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .title {
    font-weight: bold;
  }
  .btn {
    padding: 24rpx;
    box-sizing: border-box;
    color: #ccc;
  }
  .confirm {
    color: $u-primary;
  }
}
.end-disable,
.start-disable {
  color: #888888;
}
.select-Inter {
  display: flex;
  padding: 24rpx 32rpx;
  .select-time {
    box-sizing: border-box;
    text-align: center;
    &-start {
      margin-right: 19rpx;
    }
  }
  .time-box {
    .label {
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #999999;
    }
    .time-value {
      width: 200rpx;
      height: 60rpx;
      line-height: 60rpx;
      background-color: #f6f6f6;
      border-radius: 30rpx;
      font-size: 28rpx;
      margin-left: 15rpx;
    }
  }

  .active {
    width: calc(200rpx - 4rpx) !important;
    height: calc(60rpx - 4rpx) !important;
    border: 1rpx solid $u-primary;
    border-radius: 30rpx;
    background-color: #ffb72f30 !important;
    color: $u-primary;
  }
}
.content {
  display: flex;
  justify-content: center;
  .hours {
    text-align: right;
  }
  .minutes {
    text-align: left;
  }
  .hours,
  .minutes {
    flex: 1;
    //text-align: center;
    padding: 0 43rpx;
    .li {
      padding: 17rpx 0;
    }
    .active {
      color: $u-primary;
    }
  }
}
</style>
